const center = [104.1324, 36.92669]
var map = null
var mapDom = document.getElementById('map')
map = new mapboxgl.Map({
    accessToken: 'pk.eyJ1IjoibHp1bml1anAwOCIsImEiOiJjajJqcmlrMTYwMDI2MzJuaXd0NmRtZTl5In0.eMIg2fpiFaDInq2YVE4_2A',
    container: mapDom, // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: center, // starting position [lng, lat]
    zoom: 3,
    doubleClickZoom: false,
    hash: false,
    localFontFamily: true,
    logoPosition: 'bottom-right'
});

map.on('load', () => {
    map.addControl(new mapboxgl.FullscreenControl({
        container: document.querySelector('body')
    }));

    const scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'metric'
    });
    map.addControl(scale);

    map.addSource('capital', {
        "type": "geojson",
        "data": "../data/capital.geojson"
    })

    map.addLayer({
        "id": "capital-heatmap",
        "type": "heatmap",
        "source": "capital",
        'paint': {
            'heatmap-radius': 50
        }
    })

    map.addLayer({
        "id": "capital-circle",
        "type": "circle",
        "source": "capital",
        "filter": ["!=", "name", "北京"],
        paint: {
            'circle-color': 'red',
            'circle-radius': 4,
            'circle-stroke-color': 'white',
            'circle-stroke-width': 2
        }
    })

    map.addLayer({
        "id": "capital-label",
        "type": "symbol",
        "source": "capital",
        layout: {
            'text-field': ['get', 'name'],
            'text-anchor': 'bottom',
            'text-offset': [0, 1.6],
            'text-size': 12
        },
        paint: {
            'text-color': 'red'
        }
    })

    map.loadImage('../data/star.png', (error, image) => {
        if (error) throw error;
        map.addImage('five-star', image);
        map.addLayer({
            "id": "capital-bj",
            "type": "symbol",
            "source": "capital",
            "filter": ["==", "name", "北京"],
            layout: {
                'icon-image': 'five-star',
                'icon-size': 0.6,
                'text-field': ['get', 'name'],
                'text-anchor': 'bottom',
                'text-offset': [0, 1.8],
                'text-size': 14
            },
            paint: {
                'icon-opacity': 0.9,
                'text-color': 'red'
            }
        })
    });

    map.addSource('radar', {
        'type': 'image',
        'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
        'coordinates': [
            [-80.425, 46.437],
            [-71.516, 46.437],
            [-71.516, 37.936],
            [-80.425, 37.936]
        ]
    });

    map.addLayer({
        id: 'radar-layer',
        'type': 'raster',
        'source': 'radar',
        'paint': {
            'raster-fade-duration': 0
        }
    });
})